<template>
  <view class="living_bill_box" @click="emit('onClick')">
      <!-- 标题 -->
      <binary-layout>
        <template #left>
          <view class="title">
            <uni-icons type="location" size="24" />
            <view>{{ props.data.billMsg }}</view>
          </view>
        </template>
        <template #right>
          <view class="state">
            {{ getEnumValue(props.data.billState) }}
          </view>
        </template>
      </binary-layout>

      <!-- 单价、支付时间 -->
      <view class="cycle">
        <binary-layout :middle-text="info.propertyAddress">
          <template #left>
            <view class="item">物业地址</view>
          </template>
        </binary-layout>
        <binary-layout
          v-if="props.data.billPayTime"
          :middle-text="props.data.billPayTime.toString()"
        >
          <template #left>
            <view class="item">支付时间</view>
          </template>
        </binary-layout>
      </view>


    <!-- 账单金额 -->
    <view class="fees">
      <binary-layout>
        <template #left>
          <view class="item">账单金额</view>
        </template>
        <template #middle>
          <view class="price"
            >￥{{ format.priceHandler(props.data.billPrice) }}</view
          >
        </template>
        <template #right>
          <view class="stateBth">待支付</view>
        </template>
      </binary-layout>
    </view>
  </view>
</template>

<!-- 生活账单组件 -->
<script lang="ts" setup>
import { getEnumValue } from '@/config/enum/enum'
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'
import type { PageBill, PageBillByLife } from '@/config/data/data'
import { computed, type PropType } from 'vue'
import format from '@/util/format'
//接受父组件参数
const props = defineProps({
  data: {
    type: Object as PropType<PageBill>,
    default: {},
  },
})

//自定义事件
const emit = defineEmits<{
  /**
   * 点击事件
   */
  (e: 'onClick'): void
}>()

const info = computed(() => {
  return props.data.billContent as unknown as PageBillByLife
})
</script>

<style scoped lang="scss">
.living_bill_box {
  margin-bottom: 50rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  width: calc(100% - 40rpx);

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .item {
    font-size: 28rpx;
    width: 140rpx;
  }
  .state {
    width: 140rpx;
    text-align: right;
    color: #fbb719;
  }

  .price {
    color: #fbb719;
    font-weight: 600;
  }

  .stateBth {
    padding: 8rpx 14rpx;
    border-radius: 10rpx;
    color: #fff;
    background-color: #fbb719;
  }

  .cycle {
    padding: 8rpx 18rpx;
    letter-spacing: 0;
    background-color: #fbda8d22;
    border-radius: 10rpx;
  }
  .fees {
    padding: 8rpx 18rpx;
  }
}
</style>
